<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            title="投放记录"
            :async="true"
            width="950px"
            @confirm="handleSubmit"
            @close="handleSubmit"
            class="compact-popup"
        >
            <el-card class="!border-none" v-loading="pager.loading" shadow="never">
                <div class="mt-2">
                    <el-table :data="pager.lists" class="compact-table" height="450">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="广告名称" prop="ad_group_name" show-overflow-tooltip />
                        <el-table-column label="投放时间" prop="date" show-overflow-tooltip />
                        <el-table-column label="成功数量" prop="success_count" show-overflow-tooltip />
                        <el-table-column label="失败原因" class-name="nowrap-cell">
                            <template #default="scope">
                                <el-tooltip
                                    :content="formatErrorMsg(scope.row.error_msg)"
                                    placement="top"
                                    :show-after="200"
                                >
                                    <span>{{ formatErrorMsg(scope.row.error_msg) }}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120" fixed="right">
                            <template #default="{ row }">
                                <el-button type="primary" link @click="handlePlacementWechat(row)">
                                    投放人员
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="flex mt-2 justify-end">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-card>
        </popup>
        <placement-log-wechat-popup v-if="showPlacementLogWechat" ref="placementLogWechatRef" :log_id="showPlacementLogWechatLogId"
                                    @success="showPlacementLogWechat = false" @close="showPlacementLogWechat = false" />
    </div>
</template>

<script lang="ts" setup  name="tencentAdvertisingUserAdListPlacementLog" >
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { ElInput } from 'element-plus'
import { usePaging } from '@/hooks/usePaging'
import {
    apiTencentAdvertisingUserAdListLogLists,
} from '@/api/tencent_advertising_user_ad_list'
import PlacementLogWechatPopup from './placement_log_wechat.vue'


const emit = defineEmits(['success','close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('placement_log')

const placementLogWechatRef = shallowRef<InstanceType<typeof PlacementLogWechatPopup>>()
const showPlacementLogWechat= ref(false)
const showPlacementLogWechatLogId=ref()

const props = defineProps({
    ad_group_id: {
        type: String,
        default: ''
    }
})

// 查询条件
const queryParams = reactive({
    tenant_id: '',
    account_id: '',
    ad_account_id: '',
    corporation_name: '',
    ad_group_id: props.ad_group_id,
    ad_group_name: ''
})

// 分页相关
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiTencentAdvertisingUserAdListLogLists,
    params: queryParams
})

/**
 * 格式化错误信息，在第一个换行符处截断
 * @param {string} errorMsg - 完整的错误信息
 * @return {string} - 截断后的错误信息
 */
 const formatErrorMsg = (errorMsg) => {
    if (!errorMsg) return '';
    if (errorMsg.length <= 30) return errorMsg;
    return errorMsg.substring(0, 30) + '...';
}

//投放人员
const handlePlacementWechat = async (data: any) => {
    showPlacementLogWechatLogId.value=data.id
    showPlacementLogWechat.value = true
    await nextTick()
    placementLogWechatRef.value?.open('placement_log_wechat')
}


//打开弹窗
const open = (type = 'placement_log') => {
    mode.value = type
    popupRef.value?.open()
}
const handleSubmit = async () => {
    popupRef.value?.close()
    emit('success')
}

onActivated(() => {
    queryParams.ad_group_id=props.ad_group_id
    getLists()
})


onMounted(() => {
    queryParams.ad_group_id=props.ad_group_id
    getLists()
})

defineExpose({
    open,
})
</script>

<style scoped>

/* 防止单元格内容换行 */
:deep(.nowrap-cell .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表格样式 */
.compact-table {
  /* 设置固定高度，确保数据在表格内部滚动 */
  height: 450px;
}

/* 减少卡片内部间距 */
:deep(.el-card__body) {
  padding: 12px;
}

/* 减少弹窗头部与内容的间距 */
:deep(.el-dialog__body) {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 减少表格上下方间距 */
.mt-2 {
  margin-top: 8px;
}

/* 减少分页区域上方间距 */
.flex.mt-2 {
  margin-top: 8px;
}
</style>
